<template>
  <div style="width: 100%">
    <el-form
      ref="form"
      :disabled="disabled"
      :model="formDataAll"
      :rules="rules"
      size="small"
      label-width="100px"
    >
      <el-collapse v-model="activeName">
        <el-collapse-item title="基础配置" :name="0">
          <el-row>
            <el-col :span="12">
              <el-form-item label="服务名称" prop="jobGroup">
                <el-select v-model="formDataAll.jobGroup">
                  <el-option
                    v-for="item in serverList"
                    :key="item.id"
                    :label="item.appname"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务描述" prop="jobDesc">
                <el-input v-model="formDataAll.jobDesc"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="负责人" prop="author">
                <el-select size="small" v-model="formDataAll.author">
                  <el-option
                    v-for="val in userList"
                    :key="val.pid"
                    :value="val.pid"
                    :label="val.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报警邮件" prop="alarmEmail">
                <el-input v-model="formDataAll.alarmEmail"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="任务编码" prop="jobCode">
                <el-input v-model="formDataAll.jobCode" :disabled="dialogType !== 'add'"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="调度配置" :name="1">
          <el-row>
            <el-col :span="12">
              <el-form-item label="调度类型" prop="scheduleType">
                <el-select v-model="formDataAll.scheduleType">
                  <el-option label="无" value="NONE">无</el-option>
                  <el-option label="CRON" value="CRON">CRON</el-option>
                  <el-option label="固定速度" value="FIX_RATE"
                    >固定速度</el-option
                  >
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="formDataAll.scheduleType !== 'NONE'">
              <el-form-item
                label="Cron"
                prop="scheduleConf"
                v-if="formDataAll.scheduleType === 'CRON'"
              >
                <ms-cron-input
                  :value.sync="formDataAll.scheduleConf"
                ></ms-cron-input>
              </el-form-item>
              <el-form-item
                label="固定速度"
                prop="scheduleConf"
                v-if="formDataAll.scheduleType === 'FIX_RATE'"
              >
                <el-input
                  v-model="formDataAll.scheduleConf"
                  placeholder="请输入秒"
                  type="number"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="任务配置" :name="2">
          <el-row>
            <el-col :span="12">
              <el-form-item label="运行模式" prop="glueType">
                <el-select v-model="formDataAll.glueType">
                  <el-option label="BEAN" value="BEAN">BEAN</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="方法编码" prop="executorHandler">
                <!-- <el-input v-model="formDataAll.executorHandler"></el-input> -->
                <el-select
                  v-model="formDataAll.executorHandler"
                  filterable
                  remote
                  placeholder="请输入关键词"
                  :remote-method="remoteMethod"
                  :loading="loading"
                  @focus="remoteMethod"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.executorHandler"
                    :label="item.executorHandler"
                    :value="item.executorHandler"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="任务参数" prop="executorParam">
                <!-- <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="formDataAll.executorParam"
                /> -->
                <code-editor
                  :mode="'javascript'"
                  v-model="formDataAll.executorParam"
                  ref="aecEditor"
                ></code-editor>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="高级配置" :name="3">
          <el-row>
            <el-col :span="12">
              <el-form-item label="路由策略" prop="executorRouteStrategy">
                <el-select v-model="formDataAll.executorRouteStrategy">
                  <el-option
                    v-for="item in routeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="子任务Id" prop="childJobId">
                <el-input v-model="formDataAll.childJobId"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="调度过期策略" prop="misfireStrategy">
                <el-select v-model="formDataAll.misfireStrategy">
                  <el-option label="忽略" value="DO_NOTHING">忽略</el-option>
                  <el-option label="立即执行一次" value="FIRE_ONCE_NOW"
                    >立即执行一次</el-option
                  >
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="阻塞处理策略" prop="executorBlockStrategy">
                <el-select v-model="formDataAll.executorBlockStrategy">
                  <el-option label="单机串行" value="SERIAL_EXECUTION"
                    >单机串行</el-option
                  >
                  <el-option label="丢弃后续调度" value="DISCARD_LATER"
                    >丢弃后续调度</el-option
                  >
                  <el-option label="覆盖之前调度" value="COVER_EARLY"
                    >覆盖之前调度</el-option
                  >
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="失败重试次数" prop="executorFailRetryCount">
                <el-input
                  v-model="formDataAll.executorFailRetryCount"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务超时时间" prop="executorTimeout">
                <el-input v-model="formDataAll.executorTimeout"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <div class="md-component-btns">
      <el-button size="medium" :disabled="disabled" type="primary" @click="save"
        >保存</el-button
      >
      <el-button size="medium" @click="$emit('removeThisTabs')">取消</el-button>
    </div>
  </div>
</template>

<script>
import * as taskManageApi from "@/api/taskManage/taskManage";
import ScheduleConf from "./scheduleConf";
import MsCronInput from "@/components/ms-cron/ms-cron-input.vue";
import CodeEditor from "@/components/code-editor/index";
import * as common from "@/api/common";

export default {
  name: "taskConfigTemp",
  components: {
    MsCronInput,
    ScheduleConf,
    CodeEditor,
  },

  data() {
    return {
      activeName: [0, 1, 2, 3],
      serverList: [],
      userList: [],
      dialogType: "add",
      currentData: {},
      formDataAll: {
        scheduleType: "CRON",
        scheduleConf: "* * * * * ? *",
        misfireStrategy: "DO_NOTHING",
        executorBlockStrategy: "SERIAL_EXECUTION",
        executorRouteStrategy: "FIRST",
        glueType: "BEAN",
      },
      routeList: [
        {
          label: "第一个",
          value: "FIRST",
        },
        {
          label: "最后一个",
          value: "LAST",
        },
        {
          label: "轮询",
          value: "ROUND",
        },
        {
          label: "随机",
          value: "RANDOM",
        },
        {
          label: "一致性哈希",
          value: "CONSISTENT_HASH",
        },
        {
          label: "最不经常使用",
          value: "LEAST_FREQUENTLY_USED",
        },
        {
          label: "最近最久未使用",
          value: "LEAST_RECENTLY_USED",
        },
        {
          label: "故障转移",
          value: "FAILOVER",
        },
        {
          label: "忙碌转移",
          value: "BUSYOVER",
        },
        {
          label: "分片广播",
          value: "SHARDING_BROADCAST",
        },
      ],
      modeList: [
        {
          label: "BEAN",
          value: "BEAN",
        },
      ],
      rules: {
        jobGroup: [
          {
            required: true,
            message: "请选择服务",
            trigger: "blur",
          },
        ],
        jobDesc: [
          {
            required: true,
            message: "请输入任务描述",
            trigger: "blur",
          },
        ],
        author: [
          {
            required: true,
            message: "请输入负责人",
            trigger: "blur",
          },
        ],
        jobCode: [
          {
            required: true,
            message: "请输入任务编码",
            trigger: "blur",
          },
        ],
        scheduleType: [
          {
            required: true,
            message: "请选择调度类型",
            trigger: "blur",
          },
        ],
        scheduleConf: [
          {
            required: true,
            message: "请选择调度值",
            trigger: "change",
          },
        ],
        glueType: [
          {
            required: true,
            message: "请选择运行模式",
            trigger: "blur",
          },
        ],
        executorHandler: [
          {
            required: true,
            message: "请选择方法编码",
            trigger: "blur",
          },
        ],
      },
      cronPopover: false,
      options: [],
      loading: false,
    };
  },
  computed: {
    disabled() {
      return this.dialogType === "view";
    },
  },
  methods: {
    getUserList() {
      common.getUserList().then((res) => {
        this.userList = res.data.data;
      });
    },
    remoteMethod(query) {
      let params = {};
      if (typeof query === "string" && !!query) {
        params = {
          jobGroup: this.formDataAll.jobGroup,
          methodName: query,
          start: 1,
          length: 100,
        };
      } else {
        params = { jobGroup: this.formDataAll.jobGroup, start: 1, length: 100 };
      }
      this.loading = true;
      taskManageApi.getMethodList({ ...params }).then((res) => {
        this.loading = false;
        this.options = res.data.data;
      });
    },
    getServiceList() {
      taskManageApi.getServiceList().then((res) => {
        this.serverList = res.data.data;
        if (this.dialogType === "add") {
          this.formDataAll = {
            ...this.formDataAll,
            jobGroup: this.serverList[0].id,
          };
        }
      });
    },

    normalizer(node) {
      return {
        id: node.pid,
        label: node.name,
        children: node.children,
      };
    },
    save() {
      this.$refs["form"].validate((f) => {
        if (f) {
          const paramData = {
            ...this.formDataAll,
          };
          if (this.dialogType === "add") {
            delete paramData.id;
          }
          if (paramData.updateTime) {
            delete paramData.updateTime;
            delete paramData.addTime;
            delete paramData.glueUpdatetime;
          }
          //executorParam json校验
          if (paramData.executorParam) {
            try {
              const executorParam = JSON.parse(paramData.executorParam);
            } catch (err) {
              this.$message.error("请输入正确的JSON格式");
              return;
            }
          }
          let method = this.dialogType === "add" ? "addJob" : "updateJob";
          let msg = this.dialogType === "add" ? "新增" : "编辑";
          taskManageApi[method](paramData).then(() => {
            this.$message.success(msg);
            this.$emit("refresh");
            this.$emit("removeThisTabs");
          });
        }
      });
    },

    open(row) {
      this.dialogType = "add";
      if (row) {
        this.formDataAll = {
          ...this.formDataAll,
          ...row,
        };
      }
    },
    edit(row) {
      this.dialogType = "edit";
      this.formDataAll = {
        ...row,
      };
    },
    view(row) {
      this.dialogType = "view";
      this.formDataAll = {
        ...row,
      };
    },
  },
  mounted() {
    this.getServiceList();
    this.getUserList();
  },
};
</script>
